Overview and Usage

• This web extension is quick links to Google Docs and Google Slides, because I use both of these tools a lot.




Web extensino Gif

Development Process

1. Set up the manifest.json.
   Input the name, description,version, and link the file to default_popup and default_icon. Adding the content_scripts inside.




manifest page

2. Set up the HTML and CSS page.
   Link stylesheet href to css page. Link script src to javascript page.
3. Set up popip container, input the icon of google doc and google sheet in the HTML.
4. Set up the button that have “id” which link to javascript



HTML page

CSS page
5. Set up the javascript file. Using document.getElementById to get “id” from HTML page. Then, addEventListener will add the function name.
6. Set up my 2 function that each related to one id and add the url of hyperlink inside of the function.

Issue Deep-Dive

1. The problem I encountered:
   - I couldn't make the icon and button at the same line
   - I insert the hyperlink inside of HTML inside of javascript. Then, the web extension is not working.
   - Trying lots of way in javascript that want users could click button and link to google doc and google sheet. But the console continue tell me "Refused to execute inline event handler because it violates the following Content Security Policy directive"
   


2. How I resolved these issues:
   - For icon and button couldn't at the same line:
   I set up the icon's position as relative because "places an element relative to its current position without changing the layout around it" (from medium)
   
   - For web extension is not working:
   I delete the whole text with "< a >" hyperlink in HTML and replace it by "< button >". I decide to use sth like onclick="myFunction()"
   However, this is not allowed in chrome apps and extensions. I find the solution through stackoverflow and find the solution - using the "id" instead of onclick.
   
   Therefore, the HTML will look like
   

             
               <button id="myButton">Click me</button>
             
           

   Inside of javascript:
   

             
               document.getElementById("myButton").addEventListener("click", myFunction);
               function myFunction(){
                 console.log('asd');
               }
               
           

   - For "Refused to execute inline event handler because it violates the following Content Security Policy directive":
   I wasted a super long time - a week - try to find solution online. Finally, I found a useful suggestion that tell me to add the "location.href" and "window.open" inside of function
   So, I set up 2 id with 2 functions that link to Google Doc and Google sheet
   Inside of each function, I put the hyperlink inside like

             
               function myFunction(){
                 console.log("hyperlink");
                 location.href = "hyperlink";
                 window.open("hyperlink");
               };
             
           

   

   javascript page

Ideas and Future Work

1. Want to allow users to add the website by themselves
2. Users are able to click the icon with animation
3. When users add the website, that website's icon will automatically added in the extension

Kudos

• Solve the error in consolde:
  https://stackoverflow.com/questions/36324333/refused-to-execute-inline-event-handler-because-it-violates-csp-sandbox